<template>
    <div class="toolbar">
        
        <el-icon 
        style="cursor: pointer;"
        @click="collapse">
            <Menu />
        </el-icon>
        <h2>简易教学信息管理系统</h2>
        
        <div class="user-infomation">
            <img 
            style="height: 100%;"
            src="https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif?imageView2/1/w/80/h/80" alt="">
    
            <el-dropdown>
                <el-icon style="margin-left: 8px; margin-top: 1px">
                    <Setting />
                </el-icon>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>个人中心</el-dropdown-item>
                        <!-- <el-dropdown-item></el-dropdown-item> -->
                        <el-dropdown-item @click="logout()">点击退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>
<script setup>
import { defineEmits } from 'vue';
import { ArrowDown as Setting } from '@element-plus/icons-vue'
import { Menu } from "@element-plus/icons-vue"


// 声明可能触发的自定义事件
const emits = defineEmits(['collapse']);
const collapse = () => {
  // 触发名为 'send-data' 的自定义事件，并传递参数
    emits('collapse', true);
}


// 退出登录的方法
const logout = () => {
  // 清除 localStorage 中的用户信息
  localStorage.removeItem('userInfo');
  // 跳转到 '/' 路径
  window.location.href = "/"
};
</script>
<style lang="less" scoped>

.toolbar{
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 100%;
    align-items: center;
    background-color: white;
    padding: 0 20px;
    .user-infomation{
        display: flex;
        justify-content: space-around;
        img{
            width: 40%;
            border-radius: 5px;
        }
        align-items: center;
    }
}
h2{
    font-size: 30px;
    color: rgb(168,171,178);
}

</style>